<template>
    <div class="content">
        <div class="user-info">
            <img class="bg" src="@/static/images/my/bg.png" />
            <div class="inner">
                <div class="notice" @click="toPath('/pages/notice/list')">
                    <img class="image" src="@/static/images/my/notice.png" />
                    <div class="red" v-if="token && userInfo && userInfo.unReadNoticeCount"></div>
                </div>
                <div class="login">
                    <img
                        class="avatar"
                        :src="userInfo && userInfo.avatar"
                        v-if="token && userInfo && userInfo.avatar"
                    />
                    <img class="avatar" src="@/static/images/my/avatar.png" v-else />
                    <p class="text" v-if="token && userInfo">
                        {{ userInfo.nickname || userInfo.mobile }}
                    </p>
                    <p class="text" @click="toPath('/pages/login/index')" v-else>请点击登录</p>
                    <img
                        class="edit"
                        @click="toPath('/pages/my/setting')"
                        v-if="token"
                        src="@/static/images/my/edit.png"
                    />
                </div>
                <div class="account">
                    <Title name="我的账户" startColor="#7DE9DF" endColor="#B6F6F7"></Title>
                    <div class="coupon-list">
                        <div class="coupon-item" @click="toPath('/pages/card/my')">
                            <div class="coupon-name">
                                <img class="coupon" src="@/static/images/my/coupon1.png" />
                                有效套餐卡
                            </div>
                            <div class="coupon-num">
                                <p
                                    class="num"
                                    v-if="token && userInfo && userInfo.unUseStudyhallCardCount"
                                >
                                    {{ userInfo.unUseStudyhallCardCount }}张
                                </p>
                                <p v-else>0</p>
                                <u-icon name="arrow-right" color="#979797" size="14"></u-icon>
                            </div>
                        </div>
                        <div class="coupon-item" @click="toPath('/pages/coupon/convert')">
                            <div class="coupon-name">
                                <img class="coupon" src="@/static/images/my/coupon2.png" />
                                团购套餐验券
                            </div>
                            <div class="coupon-num">
                                <p>立即兑换</p>
                                <u-icon name="arrow-right" color="#979797" size="14"></u-icon>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="operate-list">
            <div class="operate-item" @click="toPath('/pages/my/seat-record')">
                <div class="inner">
                    <div class="left">
                        <img
                            class="image"
                            src="@/static/images/my/record.png"
                            style="width: 32rpx; height: 32rpx"
                        />
                        订座记录
                    </div>
                    <u-icon name="arrow-right" color="#979797" size="14"></u-icon>
                </div>
            </div>
            <div class="operate-item" @click="toPath('/pages/my/order-record')">
                <div class="inner">
                    <div class="left">
                        <img
                            class="image"
                            src="@/static/images/my/order.png"
                            style="width: 32rpx; height: 34rpx"
                        />
                        订单记录
                    </div>
                    <u-icon name="arrow-right" color="#979797" size="14"></u-icon>
                </div>
            </div>
        </div>
        <u-loadmore
            loadmoreText="找自习 来上岸"
            fontSize="24rpx"
            color="#D5D5D5"
            lineColor="#D5D5D5"
            marginTop="20"
            line
        />
    </div>
</template>

<script>
import Title from '@/components/Title';
import { mapGetters } from 'vuex';
export default {
    name: 'my',
    components: {
        Title,
    },
    data() {
        return {
            token: null,
        };
    },
    computed: {
        ...mapGetters(['userInfo']),
    },
    onShow() {
        if (uni.getStorageSync('token')) {
            this.token = uni.getStorageSync('token');
            this.$store.dispatch('getUserInfo');
        }
    },
    methods: {
        toPath(url) {
            if (!uni.getStorageSync('token')) {
                uni.navigateTo({
                    url: '/pages/login/index',
                });
                return false;
            }
            uni.navigateTo({
                url,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
page {
    background: #f6f6f6;
}
.content {
    .user-info {
        width: 750rpx;
        height: 540rpx;
        position: relative;
        .bg {
            width: 750rpx;
            height: 540rpx;
            position: absolute;
            left: 0;
            top: 0;
        }
        .inner {
            position: relative;
            width: 750rpx;
            height: 540rpx;
            padding: 0 30rpx;
            box-sizing: border-box;
            @include flexBox(space-between, flex-end, column);
            .notice {
                padding-top: 30rpx;
                position: relative;
                .image {
                    width: 44rpx;
                    height: 44rpx;
                }
                .red {
                    width: 16rpx;
                    height: 16rpx;
                    border-radius: 50%;
                    position: absolute;
                    right: 0;
                    top: 30rpx;
                    background: #ff5518;
                }
            }
            .login {
                width: 100%;
                margin-bottom: 20rpx;
                @include flexBox(flex-start);
                .avatar {
                    width: 128rpx;
                    height: 128rpx;
                    margin-left: 10rpx;
                    border-radius: 50%;
                }
                .text {
                    font-size: 32rpx;
                    color: #2f2f2f;
                    margin-left: 32rpx;
                    font-weight: 600;
                }
                .edit {
                    width: 44rpx;
                    height: 44rpx;
                    margin-left: 10rpx;
                }
            }
            .account {
                width: 690rpx;
                height: 294rpx;
                background: #fff;
                border-radius: 24rpx;
                padding: 32rpx;
                box-sizing: border-box;
                @include flexBox(space-between, flex-start, column);
                .coupon-list {
                    width: 100%;
                    @include flexBox(space-between);
                    .coupon-item {
                        width: 300rpx;
                        height: 154rpx;
                        border: 1rpx solid #e5e5e5;
                        border-radius: 24rpx;
                        padding: 30rpx;
                        box-sizing: border-box;
                        @include flexBox(center, center, column);
                        .coupon-name {
                            font-size: 28rpx;
                            color: #2f2f2f;
                            font-weight: 600;
                            @include flexBox(flex-start, center);
                            .coupon {
                                width: 48rpx;
                                height: 48rpx;
                                margin-right: 20rpx;
                            }
                        }
                        .coupon-num {
                            width: 100%;
                            margin-top: 16rpx;
                            padding-left: 70rpx;
                            box-sizing: border-box;
                            font-size: 32rpx;
                            color: #979797;
                            @include flexBox(space-between, center);
                            .num {
                                color: #2f2f2f;
                                font-weight: 600;
                            }
                        }
                    }
                }
            }
        }
    }
    .operate-list {
        width: 690rpx;
        background: #fff;
        margin: 20rpx auto 0;
        border-radius: 24rpx;
        box-sizing: border-box;
        .operate-item {
            padding: 0 32rpx;
            transition: 0.5s;
            .inner {
                padding: 32rpx 0;
                border-bottom: 1rpx solid #e5e5e5;
                @include flexBox(space-between, center);
            }
            &:last-child {
                .inner {
                    border-bottom: none;
                }
            }
            &:active {
                background: #f3f4f6;
            }
            .left {
                font-size: 28rpx;
                font-weight: 600;
                color: #2f2f2f;
                @include flexBox(flex-start, center);
                .image {
                    margin-right: 20rpx;
                }
            }
        }
    }
}
</style>
